{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>基于python的商品评价及用户画像情感信息智能提取及推荐系统</title>
    <meta content="故障诊断系统" name="description">
    <meta content="CSUST" name="author">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    {% block style_content %}

    {% endblock %}
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/css/style.css" rel="stylesheet" type="text/css">
    <style>
        #loading {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(1px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .card.timeline-card {
            box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
        }

        .card-body-1 {
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
        }

        .team-name {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 600px;
            font-weight: bold;
            font-size: 16px;
            font-family: "Arial Black", sans-serif;
        }
    </style>
</head>
<body>
<div id="preloader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>
<!--等待页面加载成功-->
<div id="loading" style="display: none;">
    <img src="/static/picture/loading.gif" alt=""/>
</div>
<header id="topnav">
    <div class="topbar-main">
        <div class="container-fluid">
            <div class="logo">
                <span class="hide-phone">
                    &nbsp;&nbsp;&nbsp;基于python的商品评价及用户画像情感信息智能提取及推荐系统
                </span>
            </div>
            <div class="menu-extras topbar-custom">
                <ul class="list-unstyled float-right mb-0"><!-- language-->
                    <!-- User-->
                    <li class="dropdown notification-list">
                        <a class="nav-link dropdown-toggle arrow-none waves-effect nav-user" data-toggle="dropdown"
                           href="#" role="button" aria-haspopup="false" aria-expanded="false">
                            <img src="/static/picture/user_img.png" alt="user" class="rounded-circle">
                        </a>
                        <div class="dropdown-menu dropdown-menu-right profile-dropdown  border-0">
                            <a class="dropdown-item" href="{% url 'login:logout' %}">
                                <i class="mdi mdi-logout m-r-5 text-muted"></i>退出
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div><!-- end container --></div><!-- end topbar-main --><!-- MENU Start -->
    <div class="navbar-custom">
        <div class="container-fluid">
            <div id="navigation"><!-- Navigation Menu-->
                <ul class="navigation-menu">
                    <li class="has-submenu">
                        <a href="{% url 'user:user_portrait' %}"><i class="dripicons-device-desktop"></i>开始用户画像</a>
                    </li>
                    <li class="has-submenu">
                        <a href="{% url 'user:display_recommend' %}"><i class="dripicons-to-do"></i>个性化推荐</a>
                    </li>
                    <li class="has-submenu">
                        <a href="{% url 'training:upload' %}"><i class="dripicons-blog"></i>在线数据建模</a>
                    </li>
                    <li class="has-submenu">
                        <a href="{% url 'user:visualization' %}"><i class="dripicons-jewel"></i>用户画像可视化</a>
                    </li>
                    <li class="has-submenu">
                        <a href="{% url 'user:display_feedback' %}"><i class="dripicons-copy"></i>个性化推荐反馈</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>
{% block content %}
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-title-box">
                        <br>
                        <h3 style="font-weight: bold; text-shadow: 2px 2px 4px #555555; text-align: center;">
                            【猜你喜欢】个性推荐
                        </h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                    <div class="card" style="height: 600px;">
                        <div class="card-body card-body-1 team-name"
                             style="font-family: 'Helvetica', sans-serif; color: #333;">
                            <img src="{% static 'picture/hat.jpg' %}" alt="安全帽" height="300" width="300">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            安全帽是一种专门设计用于保护头部的个人防护装备，通常由坚固的外壳和内衬组成，用于减轻或防止头部受伤。在工业和建筑现场，存在许多潜在的危险，如掉落物、碰撞、坠落等。安全帽可以保护头部免受这些风险的伤害，减轻或避免严重头部损伤，保护颅脑免受外界冲击。并且在许多工作场所和活动中，佩戴安全帽是法律和规定的要求，这是为了确保员工和参与者的安全，遵守相关规定可能会面临法律责任和处罚。

                        </div>
                    </div>
                </div>
            </div>

        </div><!-- end container -->
    </div><!-- end wrapper -->
{% endblock %}

<!-- Footer -->
<footer class="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12"># 2024 byXXX #</div>
        </div>
    </div>
</footer>
<!-- End Footer -->

<!-- jQuery -->
<!-- src="/static/js/jquery.min.js" 这种写法说明静态资源在最外面的static里面 -->
<!-- src="static/js/jquery.min.js" 这种写法说明静态资源在每一个单独的app里面 -->
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/modernizr.min.js"></script>
<script src="/static/js/waves.js"></script>
<script src="/static/js/jquery.slimscroll.js"></script>
<script src="/static/js/jquery.nicescroll.js"></script>
<script src="/static/js/jquery.scrollTo.min.js"></script>
<!-- KNOB JS -->
<script src="/static/js/excanvas.js"></script>
<script src="/static/js/jquery.knob.js"></script>
<!-- App js -->
<script src="/static/js/app.js"></script>
<script>
    $('#loading').show();

    // 页面加载完成后执行回调函数
    $(document).ready(function () {
        onResultReady();
    });

    function onResultReady() {
        // 隐藏loading图标
        $('#loading').hide();
    }
</script>
{% block script_content %}
    <script src="/static/js/chart.min.js"></script>
    <script src="/static/js/console-ban.min.js"></script>
    <script src="/static/js/dashboard.js"></script>
{% endblock %}
</body>
</html>
